<template>
	<view class="wrapForm">
		<view class="bgLine pB30">
			<view class="certification mL15 mR15 pR15" @click="walletBinding">
				<image :src="resources.bgCertification" mode=""></image>
				<view class="certification-left">绑定钱包</view>
				<view class="certification-right">实名认证可以保障您的资金安全</view>
			</view>
			<view class="mL15 mR15 accountInfo pT15 pB15 pL15 pR15">
				<view class="flex alg-center" @click="eyeShowChange">
					<text class="font14">我的账户金额</text>
					<u-icon v-if="eyeShow" name="eye-fill mL10" :size="35"></u-icon>
					<u-icon v-else name="eye-off mL10" :size="35"></u-icon>
				</view>
				<view class="mT15 t-center font30 bold">
					<view v-if="eyeShow">{{ balance }}</view>
					<view v-else>--</view>
				</view>
				<!-- <view class="flex jst-between mT15"  v-if="wxSync">
					<view class="pointer txBtn">
						提现
					</view>
					<view class="pointer txBtn czBtn">
						充值
					</view>
				</view> -->
				<view class="flex jst-center mT15" v-if="!isItCertified">
					<view @click="walletBinding" style="width: 488rpx;" class="pointer txBtn">
						请企业先绑定钱包
					</view>
				</view>
			</view>
		</view>
		<view class="wrapFormBody pL15 pR15 pT15 myInfoForm">
			<view class="flex jst-between pB10 alg-center">
				<text class="font15">收支明细</text>
				<!-- <view class="dateSel"><xfDatePicker :format="'yyyy-MM-dd'" v-model="dateTime" placeholder="日期选择"></xfDatePicker></view> -->
			</view>
			<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption" :bottombar="false" :top="isItCertified ? 430 : 550">
				<view class="pL15 pR15">
					<view class="flex alg-center jst-between u-border-bottom pT10 pB10" v-for="(item,i) in list" :key="i">
						<view class="font15">
							<view>{{item.trxtxt}}</view>
							<view class="font13 u-8bd mT5">{{item.createTime}}</view>
						</view>
						<view>
							<view class="font12 t-right">{{ item.trxdirText }}</view>
							<view class="font20 mT5">{{item.trxamt}}</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
					
		</view>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { findEnterpriseInfoById, getBalance, xfJjpOddjobSettlementTransactionFlowList } from "@/api/companyInterface/user.js";
	export default {
		mixins: [MescrollMixin],

		data() {
			return {
				wxSync: null,
				companyId: '',
				downOption: {
					use: true,
					auto: false
				},
				balance: 0,
				dateTime:"",
				eyeShow: true,
				isItCertified: false,
				query: {
					pageSize: 10,
       				pageNo: 1,
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: [],
			};
		},
		async onShow() {
			this.wxSync= await this.xf.getIsShowPay();
			let userInfo = this.xf.onlineUtils.getUserInfo()
			this.companyId = userInfo.companyId
			this.findEnterpriseInfoByIdApi()
			this.getBalanceApi()
		},
		methods: {
			getBalanceApi(){
				getBalance({}).then(res=>{
					if(res){
						const {result} = res
						this.balance = result.data
					}
				})
			},
			findEnterpriseInfoByIdApi(){
				findEnterpriseInfoById({}).then(res=>{
					if(res){
						this.isItCertified = res.result.isItCertified
					}
				})
			},
			search() {
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			async upCallback(page) {
				if (page.num == 1) this.list = [];
				this.query.pageNo = page.num;

				xfJjpOddjobSettlementTransactionFlowList({ ...this.query })
					.then((res) => {
					if (res) {
						const { result } = res;
						let list = result?.records.map(item=>{
							let trxdirText = ''
							let trxamt
							// 支出
							if(item.trxdir == 'D') {
								trxdirText = '支出'
								trxamt = item.trxamt 
							} else {
								trxdirText = '收入'
								trxamt = '+' + item.trxamt 
							}
							return {
								...item,
								trxdirText,
								trxamt
							}
						});
						this.list = this.list.concat(list);
						this.mescroll.endSuccess(result.total);
					}
					})
					.catch((err) => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(0);
					this.mescroll.endErr();
					});

			},
			eyeShowChange() {
				this.eyeShow = !this.eyeShow
			},
			walletBinding() {
				uni.navigateTo({
					url: `/pages/companyPage/subpackge/walletBinding/index?companyId=${this.companyId}`
				})	
			},
		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.txBtn{
		width: 304rpx;
		height: 100rpx;
		background: #ECEFFE;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		color: #386AFF;
		font-size: 32rpx;
		text-align: center;
		line-height: 100rpx;
		border: 2rpx solid #386AFF;
		&.czBtn{
			background: #386AFF;
			color: #fff;
		}
	}
	.certification{
		height: 98rpx;
		position: relative;
		image{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		display: flex;
		padding-left: 44rpx;
		color: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-size: 100% 100% !important;
		.certification-left{
			position: relative;
			font-size: 28rpx;
			margin-top: 26rpx;
		}
		.certification-right{
			position: relative;
			font-size: 24rpx;
			margin-top: 28rpx;
			margin-left: 28rpx;
		}

	}
	.wrapForm {

		height: 100%;

		.wrapFormBody {
			margin-top: -30rpx;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
		}
		.accountInfo{
			position: relative;
			z-index: 99;
			bottom: 20rpx;
			background: linear-gradient(#E9F4FE,#FFFFFF);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

	}

	.bgLine {
		background-color: #E1EEFF;
		width: 100%;
		// height: 60rpx;
	}

	.bottomW {
		position: fixed;
		bottom: 40rpx;
		width: 100%;
		left: 0;
	}

	.rightNowPay {
		width: 670rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #3291F8;
		border-radius: 30rpx;

	}
	.dateSel{
		width: 185rpx;
		height: 56rpx;
		background: #F8F8F8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding-right:10rpx;
		::v-deep .u-input__input{
			font-size: 24rpx;
			height: 56rpx !important;
			min-height: 56rpx !important;
		}
		::v-deep .u-icon__icon{
			font-size: 24rpx !important;
		}
		
	}
	
</style>